<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>后台管理中心</title>

<style type="text/css">
	.hzm_css
	{
		width: 80px;
		height: 30px;
		line-height: 30px;
		margin-top: -5px;
	}
	.layui-hzm
	{
		margin-top: -26px;
	}
</style>
<link rel="stylesheet"
	href="../css/bootstrap.min.css"/>
<link rel="stylesheet" th:href="@{/css/pintuer.css}">
<link rel="stylesheet" th:href="@{/css/admin.css}">
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">

<script type="text/javascript">
	layui.use('table', function() {
		var table = layui.table;
		table.render({
			elem : '#demo',
			url : "getDtableAll" // 数据接口(controller的方法)
			,
			page : true // 开启分页
			,
			height:400,
			limit : 5,
			cols : [ [ // 表头
			{
				type : 'checkbox',
				fixed : 'left'
			}, {
				field : 'dId',
				title : 'ID'
			}, {
				field : 'tableName',
				title : '餐厅桌名'
			}, {
				field : 'tableStatus',
				title : '餐桌状态',templet: function (item){
					if(item.tableStatus=='1')
						{
							return "预定中";
						}
					else
						{
							return "空闲";
						}
				}
			
			}, {
				field : 'orderTime',
				title : '预定时间'
			}, {
				toolbar: '#barDemo',
				title:'操作'
			}]]
		 
		});
		
		 table.on('tool(test)', function(obj){
			    var data = obj.data;
			    //console.log(obj)
			    if(obj.event === 'del'){
			      layer.confirm('真的要删除么', function(index){
			        obj.del();
			        layer.close(index);
			      });
			    }
		 })
	});
</script>
</head>
<body>
<div class="panel panel-default">
		<div class="panel-body">
			<form id="foodform" class="form-inline"
				action="${pageContext.request.contextPath}/dinner">
				<div class="form-group">
					<label for="tableName">桌名</label> <input type="text"
						class="form-control" id="tableName" value="${list}"
						name="tableName" />
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<div class="form-group">
					<label for="tableStatus">状态</label> <select class="form-control"
						id="tableStatus" name="tableStatus">
						<option value="">--请选择--</option>
						<option value="1">预定</option>
						<option value="2">空闲</option>
					</select>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<button type="submit" class="btn btn-primary" onclick="select()">搜索</button>
			</form>
				<a href="dtableAdd.html" class="btn btn-primary layui-hzm">添加</a>
		</div>
	</div>


	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs hzm_css" lay-event="edit">预定</a>
  <a class="layui-btn layui-btn-danger hzm_css layui-btn-xs" lay-event="del">退桌</a>
</script>
	
	
    <div class="layui-col-xs6">
		<div class="grid-demo">
			<div class="modal-dialog " style="width: 1200px;  overflow: auto;" >
				<div class="modal-content">
					<div class="modal-body">
						<!--此处的table是layer添加数据的位置，会根据id进行定位并在demo的下面进行数据渲染-->
						<table id="demo" lay-filter="test"></table>
						
						
					</div>
				</div>
			</div>
		</div>
	</div>
  
	<form id="formdelete" action="" method="POST">
		<input type="hidden" name="_method" value="DELETE">
	</form>
	<form id="formupdate" action="" method="POST">
		<input type="hidden" name="_method" value="PUT">
	</form>

	<!-- 添加餐桌模态框 -->
	<div class="modal fade" id="newDinner" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新建餐桌信息</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="new_dinner_form"
						enctype="multipart/form-data">
						<div class="form-group">
							<label for="new_tableName" class="col-sm-2 control-label">
								新增桌名 </label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_tableName"
									name="tableName" placeholder="新增桌名" />
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" onclick="checkNull()">添加餐桌</button>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
		/* 清空添加框 */
		function clearDinner() {
			$("#new_tableName").val("");
		}
		/* 非空验证 */
		function checkNull() {
			if ($("#new_tableName").val() == ""
					|| $("#new_tableName").val() == 0) {
				alert("       '" + $(this).attr("placeholder") + "' 不能为空！\r\n");
				return false;
			} else {
				createDinner();
				return true;
			}
		}
		
		
		function createDinner() {
			$.post("${pageContext.request.contextPath}/createDinner", $(
					"#new_dinner_form").serialize(), function(data) {
				if (data == "OK") {
					alert("创建成功！");
					window.location.reload();
				} else {
					alert("创建失败！");
					window.location.reload();
				}
			});
		}
</body>
</html>